<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单设计器</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/jquery.datetimepicker.css">
    <link rel="stylesheet" href="css/imgareaselect-default.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>


    <div class="container">
        


        <div class="form-horizontal set_form_content active">

            <div class="col-sm-9">

                <div class="form-group">

                    <div style="margin-bottom:10px;" class="control-label col-sm-2 col-sm-offset-2">
                        <button class="btn btn-success btn-block save_form_info">保存</button>
                    </div>
                    <div class="control-label col-sm-2">
                        <button class="btn btn-default btn-block" data-toggle="modal" data-target="#prev_form">预览</button>
                    </div>

                    <div class="control-label col-sm-2">
                        <button class="btn" onclick="back()">返回</button>
                    </div>

                </div>

                <form class="form-horizontal" style="padding-top:0px;">

                    <div class="form-group">
                        <label class="control-label col-sm-2">表单名称</label>
                        <div class="col-sm-10">
                            <input type="hidden" value="" id="hdFormId" />
                            <input type="text" id="txtFormName" class="form-control" maxlength="100" minlength="5" placeholder="请输入活动标题（不少于5个字）" />
                        </div>
                    </div>
        
                </form>

                <!--添加的表单-->
                <div id="create-form">



                </div>

                <div id="thisMainPanel">

                </div>

               

            </div>

            <div class="col-sm-3 aside" style="margin-top:75px;">
                <div class="top_form form-group">
                    <h4>常用栏位</h4>
                    <hr>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(0);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                订单日期
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(7);">
                                <span class="glyphicon glyphicon-alert"></span>
                                客户
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(1);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                送货日期
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(8);">
                                <span class="glyphicon glyphicon-alert"></span>
                                联系方式
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(2);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                状态
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(9);">
                                <span class="glyphicon glyphicon-alert"></span>
                                地址
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(3);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                商品
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(10);">
                                <span class="glyphicon glyphicon-alert"></span>
                                渠道
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(4);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                售价
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(11);">
                                <span class="glyphicon glyphicon-alert"></span>
                                渠道单号
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(5);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                成本
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(12);">
                                <span class="glyphicon glyphicon-alert"></span>
                                备注
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(6);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                数量
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(13);">
                                <span class="glyphicon glyphicon-alert"></span>
                                其他
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(22);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                操作人
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(23);">
                                <span class="glyphicon glyphicon-alert"></span>
                                添加时间
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(24);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                下单日期
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(25);">
                                <span class="glyphicon glyphicon-alert"></span>
                                使用日期
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(26);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                码头
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(27);">
                                <span class="glyphicon glyphicon-alert"></span>
                                班次
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(28);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                票种
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(29);">
                                <span class="glyphicon glyphicon-alert"></span>
                                供应商
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(31);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                收款
                            </button>
                        </div>
                        <div class="col-sm-6">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(30);">
                                <span class="glyphicon glyphicon-alert"></span>
                                供应商结算
                            </button>
                        </div>
                    </div>
                </div>
                <div class="bottom-form">
                    <h4>自定义栏位</h4>
                    <hr>
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(14);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                单行文本框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(15);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                数字输入框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(16);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                日期选择框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(17);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                邮箱输入框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>

                    <!--
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(18);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                多行文本框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>
                    
               <div class="row">
                   <div class="col-sm-12">
                       <button class="btn btn-block btn-default" onClick="add_edit_form(19);">
                           <span class="glyphicon glyphicon-compressed"></span>
                           单选按钮
                           <span class="glyphicon glyphicon-plus add_plus"></span>
                       </button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-sm-12">
                       <button class="btn btn-block btn-default" onClick="add_edit_form(20);">
                           <span class="glyphicon glyphicon-compressed"></span>
                           多选按钮
                           <span class="glyphicon glyphicon-plus add_plus"></span>
                       </button>
                   </div>
               </div>
           
                    <div class="row">
                        <div class="col-sm-12">
                            <button class="btn btn-block btn-default" onClick="add_edit_form(21);">
                                <span class="glyphicon glyphicon-compressed"></span>
                                下拉选择框
                                <span class="glyphicon glyphicon-plus add_plus"></span>
                            </button>
                        </div>
                    </div>

 -->
                </div>
            </div>
        </div>

    </div>


    <div id="prev_form" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">预览表单</h4>
                </div>
                <div class="modal-body">

                    <div id="other_form" class="form-horizontal">
                        <div class="form-group">
                            <div class="control-label col-sm-12 col-sm-offset-1">

                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>




    <script src="js/bootstrap.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/jquery.datetimepicker.full.min.js"></script>
    <script src="js/jquery-1-7.js"></script>
    <script src="js/create_form_standard.js?v=1"></script>
    <script src="js/create_form.js"></script>


    <script>

        //点击取消添加autoHide
        $(".cancel").click(function () {
            option.autoHide = true;
            $('#img').imgAreaSelect(option);
            option.autoHide = false;

            $("#target").children("canvas").remove();
            $("#target").children("img").removeClass("hide");
        });


        // 提示信息
        $(".info-sign").mouseenter(function () {
            $(this).siblings(".info-sign-detail").css({ "opacity": 1, 'visibility': "visible" });
        }).mouseleave(function () {
            $(this).siblings(".info-sign-detail").css({ "opacity": 0, 'visibility': 'hidden' });
        });



        //close item
        function closeItem(selector, isOne) {

            selector.on("click", ".remove_item", function () {
                if (isOne) {
                    var fromUrl = $(this).parent().data("from");
                    $(this).parent().remove();
                    $(fromUrl).find("li.active").removeClass("active");
                } else {
                    var idx = $(this).parent().data("idx");
                    console.log(idx);
                    $(this).parent().remove();
                    $("#category_item_box").find("li:eq(" + idx + ")").removeClass("active");
                }
            });
        }

        closeItem($(".selectClick"), true);
        closeItem($(".itemClick"));




        // 保存自定义表单
        $(".save_form_info").click(function () {


            var formId = $('#hdFormId').val();

            var formName = $('#txtFormName').val();
            var targetHtml = $("#create-form").html();

            var sourceHtml = $("#prev_form .modal-body").html();

            //alert(targetHtml);
            //return;

            var jsonstate = JSON.stringify(formItemsJson);
            //alert(formItemsJson_TEXT);

            if (!formName) {
                alert("【表单名称】必须填写");

                return;
            }


            var saveUrl = sessionStorage.getItem("backend") + "api/reportmodel/save";


            $.ajax({
                url: saveUrl,
                type: 'post',
                //dataType: 'application/x-www-form-urlencoded',
                dataType: "json",
                //async:false,
                data: {
                    "token": sessionStorage.getItem("token"),
                    "formname": formName,
                    "formid": formId,
                    "target": targetHtml,
                    "source": sourceHtml,
                    "jsonstate": jsonstate
                },
                success: function (data) {
                    if (!data.success) {

                        alert(data.message);
                    }
                    else {

                        top.window.location.href = "/#/app/form_install?id=" + data.data;
                    }
                },
                error: function (data) {

                    console.log(data);

                }
            });


            /*
            var form_user = $("#prev_form .modal-body").clone(true);
    
            var h =  form_user.innerHtml;
    
            $("body").append(form_user);
            */




        });

        QueryString = {
            data: {},
            Initial: function () {
                var aPairs, aTmp;
                var queryString = new String(window.location.search);
                queryString = queryString.substr(1, queryString.length); //remove   "?"    
                aPairs = queryString.split("&");
                for (var i = 0; i < aPairs.length; i++) {
                    aTmp = aPairs[i].split("=");
                    this.data[aTmp[0]] = aTmp[1];
                }
            },
            GetValue: function (key) {
                return this.data[key];
            }
        };

        QueryString.Initial();

        $(document).ready(function () {

            var id = QueryString.GetValue('id');
            if (id == '0' || id == 'undefined')
                return;

            if (id) {

                console.log("a");

                loadform(id);
            }

        });


        function loadform(id) {

            var loadUrl = sessionStorage.getItem("backend") + "api/reportmodel/load";

            $.ajax({
                url: loadUrl,
                type: 'post',
                //dataType: 'application/x-www-form-urlencoded',
                dataType: "json",
                //async:false,
                data: { token: sessionStorage.getItem("token"), id: id },
                success: function (data) {

                    if (!data.success) {
                        alert(data.message);
                    }
                    else {
                        //console.log(data.data);

                        var d = data.data;

                        formItemsJson = JSON.parse(d.jsonstate);

                        $('#hdFormId').val(d.formid);
                        $('#txtFormName').val(d.billkey);
                        
                        $("#create-form").html(d.target);
                        
                        /*
                        
                        $("#prev_form .modal-body").html(d.source);
                        */
                        

                        for (let i = 0; i < formItemsJson.length; i++) {
                            (function (i) {
                                "use strict";
                                renderFormTpl(i);
                                //console.log(i);
                            })(i)
                        };
                        
                        

                        
                    }
                },
                error: function (data) {

                    console.log(data);

                }
            });


        }

        function back() {
            window.top.location.href = '/#/app/reportmodel';
            //var jsonstate = JSON.stringify(formItemsJson);
            //alert(jsonstate);
        }



    </script>
</body>

</html>